<?php
require_once 'class/control.class.php';
ob_start();
?>
	<div id="destaque">
		<?php 
			$obj = new Control('visualizar','banners','1');
			$obj->Lister();
		?>
	</div>
</div><!-- fecha container -->
	<div id="barra">
		<div id="container">	 		
	 		<div id="left">
	 			<ul id="bolinhas">
	 				<?php 
						$obj = new Control('bolinhas','categorias','');
						$obj->Lister();
					?>
	 			</ul>
	 		</div>
	 		<div id="right"></div>
	 	</div>
	</div>
<div id="container">	
	<div id="conteudo">
		<ul id="capa">
			<?php 
				$obj = new Control('capa','posts','');
				$obj->Lister();
			?>
			<?php 
				$obj = new Control('capa','cases','');
				$obj->Lister();
			?>
		</ul>
		<br class="clear" />
	</div>
	
	<script type="text/javascript">
		$(window).load(function(){
						
		});
    	$(document).ready(function() {	
        	/*
    		$("ul#bolinhas li").hover(function() {
				$(this).addClass('active');
				$("#barra #container #right").fadeIn('slow').text($(this).attr('rel'));
				Cufon.refresh();
			}, function() {
				$(this).removeClass('active');
				$("#barra #container #right").fadeOut('slow').text('');
				Cufon.refresh();
			});
			*/
			$('.window').css('height','260px');
			//$(".paging").show();
			$("ul#bolinhas li:first").addClass("setado");
			$("#barra #container #right").fadeIn('slow').text( $("ul#bolinhas li:first").attr('rel') );
			Cufon.refresh();
				
			//Get size of images, how many there are, then determin the size of the image reel.
			var imageWidth = $(".window").width();
			var imageSum = $(".image_reel img").size();
			var imageReelWidth = imageWidth * imageSum;
			
			//Adjust the image reel to its new size
			$(".image_reel").css({'width' : imageReelWidth});
			
			//Paging + Slider Function
			rotate = function(){	
				var triggerID = $active.attr("rel") - 1; //Get number of times to slide
				var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
		
				$(".paging a").removeClass('active'); //Remove all active class
				$("ul#bolinhas li").removeClass('setado');
				$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
				$('ul#bolinhas li[title=' + $active.attr('rel') + ']').addClass('setado');
				$("#barra #container #right").fadeIn('slow').text( $('ul#bolinhas li[title=' + $active.attr('rel') + ']').attr('rel') );
				Cufon.refresh();
				
				//Slider Animation
				$(".image_reel").animate({ 
					left: -image_reelPosition
				}, 500 );
				
			}; 
			
			//Rotation + Timing Event
			rotateSwitch = function(){		
				play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
					$active = $('.paging a.active').next();
					if ( $active.length === 0) { //If paging reaches the end...
						$active = $('.paging a:first'); //go back to first
					}
					rotate(); //Trigger the paging and slider function
				}, 3000); //Timer speed in milliseconds (3 seconds)
			};
			
			rotateSwitch(); //Run function on launch
			
			//On Hover
			$(".image_reel a").hover(function() {
				clearInterval(play); //Stop the rotation
			}, function() {
				rotateSwitch(); //Resume rotation
			});	
			
			//On Click
			//$(".paging a").click(function() {	
			$('ul#bolinhas li').click(function() {				
				$active = $('.paging a[rel='+$(this).attr('title')+']'); //Activate the clicked paging
				$(this).addClass('setado');
				//Reset Timer
				clearInterval(play); //Stop the rotation
				rotate(); //Trigger rotation immediately
				rotateSwitch(); // Resume rotation
				return false; //Prevent browser jump to link anchor
			});
		});
	</script>
<?php 
$conteudo = ob_get_contents();
ob_get_clean();
include ("master.php");
?>	